<template>
  <div class="content">
    <div class="nine" v-for="item in nine" :key="item.id">
      <!-- {{item.desc}} -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img :src="item.pic" alt="" height="100" width="100"
        /></van-swipe-item>
        <van-swipe-item v-for="(it, index) in item.pics" :key="index"
          ><img :src="it" alt=""
        /></van-swipe-item>
      </van-swipe>
      <div class="nine-quan">
        <img
          class="quan"
          src="https://img.alicdn.com/imgextra/i2/2053469401/O1CN01WITtmC2JJi5yy30Xt_!!2053469401.png"
          alt=""
        />
        <img
          class="sex"
          src="https://img.alicdn.com/imgextra/i1/2053469401/O1CN01ZD5QRC2JJi5yFLMaP_!!2053469401.png"
          alt=""
        />
      </div>
      <div class="galaxy">
        <div class="price">
          <div class="aoprice">
            ￥<span>{{ item.afterCouponPrice }}</span
            ><del>原价￥{{ item.origPrice }}</del>
          </div>
          <div class="sales">
            已售<span v-if="item.sales > 10000"
              >{{ (item.sales / 10000).toFixed(1) }}万</span
            ><span v-if="item.sales < 10000">{{ item.sales }}</span>
          </div>
        </div>
        <div class="dtitle">
          <img
            src="https://cmsstatic.ffquan.cn/wap_new/common/images/tm.png?v=2021-06-04"
            alt=""
          />
          {{ item.dtitle }}
        </div>
        <div class="coupon">
          <div class="couponPrice">
            ￥<span>{{ item.couponPrice }}</span>
          </div>
          <div class="couponquan">
            <span>优惠券使用期限</span
            ><span
              >{{ item.quanStartTime.split(" ")[0].split("-").join(".") }}-{{
                item.quanEndTime.split(" ")[0].split("-").join(".")
              }}</span
            >
          </div>
          <div class="once">立即领券</div>
        </div>
      </div>
      <div class="talent">
        <div class="talent-ava">
          <div class="avatar">
            <img
              src="https://cmsstatic.ffquan.cn//wap_new/main/images/avatar@2x.png"
              alt=""
            />达人推荐
          </div>
          <div>{{ item.marketId }}次分享</div>
        </div>
        <div class="talent-content">{{ item.desc }}</div>
      </div>
      <div class="store">
        <img :src="good.shopLogo" alt="Logo" />
        <div class="store-info">
          <div class="info-head">
            <span>{{ good.shopName }}</span>
            <div class="info-into">
              <a class="ao" href="">进店逛逛</a>
              <a class="at" href="">全部商品</a>
            </div>
          </div>
          <div class="dsr">
            <span>描述:{{ good.dsrScore.toFixed(1) }}</span>
            <span v-if="good.dsrScore > 4.5" class="gao">高</span>
            <span v-else class="低">低</span>
            <span>卖家:{{ good.serviceScore.toFixed(1) }}</span>
            <span v-if="good.serviceScore > 4.5" class="gao">高</span>
            <span v-else class="低">低</span>
            <span>物流:{{ good.shipScore.toFixed(1) }}</span>
            <span v-if="good.shipScore > 4.5" class="gao">高</span>
            <span v-else class="低">低</span>
          </div>
        </div>
      </div>
    </div>
    <div class="handpick">
      <span class="handp">
        <em class="em-one"></em>
        <van-icon name="like" />
        为你精选
        <em class="em-two"></em>
      </span>
      <div v-if="!list" class="loading">
        <span></span>
        <van-loading color="#1989fa" size="50px" />
      </div>
      <div v-else class="shop">
        <div class="shop-box" v-for="item in list" :key="item.id">
          <img class="shop-pic" :src="item.pic" />
          <div class="shop-p">
            <div class="shop-title">
              <img
                class="shop-tianmao"
                src="https://cmsstatic.ffquan.cn/wap_new/common/images/tm.png?v=2021-06-04"
              />
              <p class="title-p">{{ item.dtitle }}</p>
            </div>
            <div class="title">
              <p class="title-quan">
                券后<b>￥</b>
                <span>{{ item.jiage }}</span>
              </p>
              <div class="product-info">
                <span class="juan"><span>劵</span>{{ item.quanJine }}元</span>
              </div>
              <div class="sales">
                已售<span v-if="item.xiaoliang > 10000"
                  >{{ (item.xiaoliang / 10000).toFixed(1) }}万</span
                ><span v-if="item.xiaoliang < 10000">{{ item.xiaoliang }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon
        icon="star"
        text="收藏"
        color="#ff5000"
        @click="shopcar"
      />
      <van-action-bar-button type="warning" text="加入收藏" @click="shopcar" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import qs from "qs";
import { getCookie } from "@/utils";
export default defineComponent({
  setup() {
    const state = reactive({
      list: [],
      nine: [],
      good: [],
    });
    const shopcar = () => {
      const nine = qs.parse(
        qs.stringify(qs.parse(qs.stringify(state.nine)).data)
      );
      const good = qs.parse(qs.stringify(state.good));
      console.log(nine);
      axios
        .post(
          "http://59.110.226.77:3000/api/shopcar/add",
          qs.stringify({
            imgUrl: nine.pic,
            d_title: nine.dtitle,
            price: nine.afterCouponPrice,
            oringinal: nine.origPrice,
            sales: nine.sales,
            comment: good.shopName,
            num: nine.couponPrice,
            token: getCookie("token"),
            shopId: router.params.goodid,
          })
        )
        .then((res) => {
          console.log("res", res);
        });
    };
    const router = useRoute();
    axios
      .get(
        "https://www.fastmock.site/mock/3586da3f313a6cf2d72480c728b93e35/api/nine"
      )
      .then((res) => {
        state.nine = res?.data;
      })
      .catch((err) => {
        console.log(err);
      });
    axios
      .get(
        `http://cmsjapi.ffquan.cn/api/goods/get-recommend-goods?id=${router.params.cid}&clean=c&advVersion=1`
      )
      .then((res) => {
        state.list = res?.data?.data;
      })
      .catch((error) => {
        console.log(error);
      });
    axios
      .get(
        `http://cmsjapi.ffquan.cn/api/goods/get-goods-shop-info?goodsId=${router.params.goodid}`
      )
      .then((res) => {
        state.good = res?.data?.data;
        console.log("1", state.good);
      })
      .catch((error) => {
        console.log(error);
      });
    return {
      ...toRefs(state),
      shopcar,
    };
  },
});
</script>
<style lang="stylus" scoped>
*
  margin 0
  padding 0
.content
  background-color #F6F6F6
.nine
  .nine-quan
    position relative
    .quan
      width 100%
      display block
    .sex
      position absolute
      height .45rem
      top 0
      left .1rem
  .galaxy
    font-size .13rem
    border-radius 0 0 10px 10px
    padding .05rem .1rem .12rem
    background #FFF
    .price
      display flex
      justify-content space-between
      align-items center
      .aoprice
        color #F91415
        span
          font-size .3rem
        del
          padding-left .1rem
          color #888
      .sales
        font-size .1rem
        color #888
        padding-right .1rem
    .dtitle
      margin .12rem 0
      img
        width 0.24rem
        height 0.13rem
    .coupon
      height .65rem
      background linear-gradient(270deg,#fee 0,#ffe2e8 100%)
      border-radius 10px
      box-sizing border-box
      padding .15rem 0
      display flex
      align-items center
      .couponPrice
        height .35rem
        line-height .35rem
        padding 0 .2rem
        font-size .15rem
        font-weight 400
        color #ff313e
        span
          font-size .3rem
      .couponquan
        display flex
        flex-direction column
        color #ff313e
      .once
        color #ff313e
        margin 0 .4rem
  .talent
    margin-bottom 10px
    border-radius 10px
    background #FFF
    box-sizing border-box
    padding 7px 12px 12px
    font-size .13rem
    margin-top .1rem
    .talent-ava
      display flex
      justify-content space-between
      align-items center
      color #888
      .avatar
        color #fe3738
        display flex
        align-items center
        img
          width .27rem
          height .27rem
          margin-right .04rem
    .talent-content
      background #F4F4F4
      border-radius .1rem
      padding .08rem .18rem
      margin-top .1rem
      position relative
      color #555
      line-height .18rem
      &::after
        content ''
        width 0
        height 0
        position absolute
        top -10px
        left 51px
        border-bottom 12px solid #F4F4F4
        border-right 20px solid #FFF
        z-index 8
        transform rotate(-10deg)
  .store
    padding .1rem
    background #FFF
    margin-bottom .1rem
    border-radius .1rem
    font-size .13rem
    display flex
    img
      width .52rem
      height .52rem
      border-radius 5px
    .store-info
      padding-left: .08rem;
      height .52rem
      width 100%
      display flex
      flex-direction column
      justify-content space-between
      .info-head
        display flex
        justify-content space-between
        align-items center
        .info-into
          display flex
          a
            width: .58rem;
            height: .22rem;
            line-height: .22rem;
            font-size: .11rem;
            display block
            border-radius: 11px;
            text-align center
          .ao
            color: #fe3738;
            border: 1px solid #fe3738;
          .at
            background linear-gradient(90deg,#ff5050 0,#ff345d 100%)
            color #fff
            margin-left .1rem
      .dsr
        display flex
        align-items center
        .gao,.di
          width .12rem
          height .12rem
          display block
          background-color red
          color #fff
          font-size .1rem
          border-radius 2px
          text-align center
          margin-right .14rem
        .gao
          background-color red
        .di
          background-color green
  .my-swipe
    img
      width 100%
      height auto
    /deep/.van-swipe__indicators
      bottom 40px
    /deep/.van-swipe-item
      height 3.75rem
.handpick
  padding-bottom .6rem
  text-align center
  .loading
    span
      display block
      height .8rem
  .handp
    display block
    position relative
    font-size .15rem
    color #FC3F78
    margin-bottom .2rem
    em
      width .5rem
      top 50%
      height 1px
      border-top solid 1px #FC3F78
      position absolute
      display inline-block
      &:before
        content ""
        width 3px
        height 3px
        top -2px
        border-radius 100px
        background #FC3F78
        position absolute
        z-index 1
    .em-one
      left 20%
      text-align right
    .em-two
      right 20%
      text-align left
  .shop
    display flex
    justify-content center
    flex-wrap wrap
    .shop-box
      margin-top .05rem
      width 48%
      font-size .15rem
      background-color #fff
      border-radius 5px
      overflow hidden
      &nth-child(even)
        margin-left .05rem
      .shop-pic
        width 1.8rem
        height 1.8rem
        display block
      .shop-p
          padding .1rem .09rem
          box-sizing border-box
          height 1.11rem
          display flex
          flex-direction column
        .shop-title
          display flex
          align-items center
          .title-p
            padding 0
            margin 0
            font-size .12rem
            text-align left
            flex 1
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
          .shop-tianmao
            width .24rem
            height .13rem
.title
  flex 1
  display flex
  flex-direction column
  .title-quan
    .ju
      font-size 0
      margin-right 0.03rem
      line-height 0
      img
        width .12rem
        height .12rem
    .red_bubble
      position relative
      z-index 1
      font-size 9px
      font-weight 400
      color #fff
      background linear-gradient(150deg,#fe3a33 0,#fb8d2c 100%)
      line-height 12px
      padding 0 3px
      margin-left 5px
      top -2px
      height 12px
      .triangle
        position absolute
        left -4px
        top 0
        width 0
        height 0
        z-index -1
        border-color #f8403a transparent transparent
        border-width 6px 8px
        border-style solid
        transform rotate(0)
    flex 1
    display flex
    align-items flex-end
    text-align left
    font-size .1rem
    b
      color #FF2B22
    span
      color #FF2B22
      font-size 0.18rem
      line-height 0.16rem
  .product-info
    display flex
    justify-content left
    padding 0.05rem 0
    .goods
      height .12rem
      border-radius 2px
      border 1px solid
      font-size 9.5px
      font-weight 400
      padding 0 .03rem
      margin-right 5px
      line-height .12rem
      vertical-align middle
    .info-one
      border-color rgba(255,1,55,.55)
      color #FF0137
    .info-two
      border-color rgba(245,114,36,.7)
      color #F57223
    .juan
      height .14rem
      background linear-gradient(90deg,#ff8873 0,#ff4f4f 100%)
      border-radius 2px
      padding 0 .05rem 0 .01rem
      font-size 0.09rem
      font-weight 400
      color #fff
      line-height 0.14rem
      display inline-block
      position relative
      top 0
      vertical-align middle
      span
        background #fff
        border-radius 1px 0 0 1px
        font-size 10px
        color #FE3A33
        margin auto 5px auto 0
        min-width 12px
        max-width 12px
        min-height 12px
        max-height 12px
        display inline-block
        line-height 12px
        text-align center
        vertical-align middle
  .sales
    font-size .1rem
    color #888
    text-align left
  .comm
    font-size .1rem
    span
      color #888
</style>
